<template>
  <view class="card">
    <view class="ul">
      <view class="li" v-for="(item,index) in treeData" :key="index">
        <view class="item" :class="{'line-left':index!==0,'line-right':index!=treeData.length-1}">
          <view class="item-name" :class="{'line-bottom':item.children&&item.children.length>0,'line-top':!treeFirst}">
            <view  v-if="false" class="reduce" @click="delChild(index)">-</view>
            <view>
              {{item.name}}
            </view>
            <view v-if="false" class="plus" @click="addChild(index)">+</view>
          </view>
        </view>
        <TreeItem v-if="item.children&&item.children.length>0" :tree-data="item.children" />
      </view>
    </view>
  </view>
</template>

<script>
import TreeItem from '@/components/treeTuY/tree-item.vue'
export default {
	components:{TreeItem},
  name: 'TreeItem',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeFirst: { //判断是否第一个
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    // 添加子元素
    addChild(index) {
      if (this.treeData[index].child) {
        this.treeData[index].child.push({ name: '1' })
      } else {
        this.$set(this.treeData[index], 'child', [{ 'name': '1' }])
      }
    },
    // 删除子元素
    delChild(index) {
      this.treeData.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
$line-length:21px; //线长
$spacing:20px; //间距
$extend:calc(#{$spacing} + 2px); //延长线

// 线样式
@mixin line{
    content: "";
    display: block;
    width: 2px;
    height: $line-length;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background:black;
}
// 加减号icon
@mixin icon{
  position: absolute;
  border: solid 1px #666;
  border-radius: 100%;
  bottom:-5px;
  width: 12px;
  height: 12px;
  line-height: 10px;
  text-align: center;
  color:#666;
  z-index: 100;
  cursor: pointer;
  margin: 0;
  padding: 0;
  // opacity: 0;
}

.card{
    .ul{
        display: flex;
        justify-content: center;
        .li{
            .item{
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                &-name{
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                    height:200px;
                    padding: 5px;
                    margin: $spacing;
					border:1px solid black;
                    background: white;
					box-shadow: 18rpx 18rpx 10rpx #888888;
                    color: black;
                    .plus{
                      @include icon();
                      &:hover{
                        opacity: 100%;
                      }
                    }
                    .reduce{
                      @include icon();
                      top:-5px;
                      &:hover{
                        opacity: 100%;
                      }
                    }
                }
            }
        }

    }
    // 向下的线
    .line-bottom{
        &::after{
            @include line();
            bottom: -$line-length;
        }
    }
    // 向上的线
    .line-top{
        &::before{
            @include line();
            top: -$line-length;
        }
    }
    // 向左的线
    .line-left{
        &::after{
            @include line();
            width: calc(50% + #{$spacing});
            height: 2px;
            left: calc(-50% - #{$extend});
            top: 0;
        }
    }
    // 向右的线
    .line-right{
        &::before{
            @include line();
            width: calc(50% + #{$spacing});
            height: 2px;
            right: calc(-50% - #{$extend});
            top: 0;
        }
    }
}
</style>
